@charset "utf-8";
/* CSS Document */

 *{
  margin: 1%;
  box-sizing: border-box;
}

@font-face {
  font-family: "Cracked Johnnie";
  src: url(CRACJ___.TTF);
}

body {
  font-family: "Lucida Sans", sans-serif;
}

/*main splashscreen heading*/
.header{
	font-family: "Cracked Johnnie";
	text-align: center;
	font-size: 5vw;
	font-weight:bolder;
	color:#F96;
	border-width: medium;
	
}


.subhead{
	text-align: center;
	font-size: 3vw;
	color:#F96;
}

.subhead a{
color: #69C;
text-decoration: none;
font-size: 1.5vw;
}

.subhead a:hover {
  background-color: #69C;
  color: white;
  font-size: 1.5vw;
}

/* At the bottom of each page*/

.footer {
	
background-color: #F96;
color: aliceblue;
height: 30px;
width: 100%;
text-align:center;
font-size: 1vw;
padding: 20px 0;
}

/*navigation bar*/
.topnav2 {
  overflow: hidden;
  background-color: white;
 
}

.topnav2 a {
  
  float:left;
  display: block;
  padding-top: 18px;
  padding-bottom: 18px;
  border-radius: 12px;
  color: #F96;
  text-align: center;
  width:18%;
  text-decoration: none;
  font-size: 1.5vw;

}

.topnav2 a:hover {
  background-color: #69C;
  color: white;
}

.topnav2 a.active {
  background-color: #69C;
  color: white;
}

.topnav2 .icon {
  display: none;
}

/* Three columns that float next to each other middle column is wide */
.columnE {
  float: left;
  width: 16%;

 
}
.columnC{
 float: left;
  width: 60%;

 text-align: center;
 font-size: 2vw;
}

.picturebox{
	float:left;
	width:23%;
	padding:1vw
}
.picturebox img {
  width: 100%;
  height: auto;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.center_box{
	width:100%;
	align-content: center;
	height:auto;
	color: black;
	font-size: 3vw;
	
}

@media screen and (max-width: 600px) {
  .topnav2 a:not(:first-child) {display: none;}
	
  .topnav2 a.icon {
    float: right;
    display: block;
	
  }
	.topnav2 a{
	font-size: 4vw;
	}
	.columnE{
	display: none;
	}
	
}

@media screen and (max-width: 600px) {
  .topnav2.responsive {position: relative;}
  .topnav2.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav2.responsive a {
    float: none;
    display: block;
    text-align: left;
	width:30%;
	padding-left: 20px;
	  font-size: 4vw;
  }
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnE {
    width: 100%;
  }
.columnC {
    width: 100%;
  }
.header{
	font-size:8vw;
	}
.subhead{
	font-size:6vw;
	}
.picturebox{
	width:100%
	}
	
.footer{
	font-size: 3vw;	
	}
.subhead a{
	font-size: 3vw;
		
	}


}